<template>

  <view class="shop-layout">
    <z-paging ref="paging" v-model="goodsData" @query="queryList" :refresher-enabled="false">
      <view class="header" :style="{ paddingTop: top + 'rpx' }">
        <view class="header_top">
          <!-- <view class="header_title">商城</view> -->
          <image mode="heightFix" class="header_title" src="https://www.dingxians.cn/images/shop/logo.png"></image>
          <!-- <image class="header_image" mode="heightFix" src="http://www.qixdian.cn/upload/20231009/6524029fdf594.png"></image> -->
          <text class="header-desc">正品保障｜精选好物｜急速发货</text>
        </view>
        <view class="cat_box">
          <view :class="cat_id == item.id ? 'active' : ''" @click="changeCat(item.id)" class="cat_item"
            v-for="item in catData" :key="item.id">
            <view class="cat-item-title">{{ item.text }}</view>
            <!-- <view class="cat_border"></view> -->
          </view>
        </view>
      </view>
      <view class="content">
        <scroll-view refresher-background="" class="scroll">
          <view class="goods_box" v-if="cat_id == 1">
            <view class="goods_item" @click="header(`/pages/shop/detail?id=${item.id}`)" v-for="item in goodsData"
              :key="item.id">
              <image class="goods_image" :src="item.image" mode="aspectFill"></image>
              <view class="goods_title">{{ item.title }}</view>
              <view class="price_box">
                <view class="price_box_left">
                  <view class="price_icon">￥</view>
                  <view class="price">{{ item.price }}</view>
                </view>
                <view class="price_ext">参考价</view>
              </view>
            </view>
          </view>
          <view class="goods_box" v-else>
            <view class="goods_item" style="padding-top: 40rpx;" @click="header('/pages/shop/rh?item=' + JSON.stringify(item) + '&lzshop=' + true + '&index=' + index)"
              v-for="item,index in goodsData" :key="index">
              <image class="goods_image" :src="item.goods_image" mode="aspectFill"></image>
              <view class="goods_title">{{ item.goods_name }}</view>
              <view class="price_box">
                <view class="price_box_left">
                  <view class="price_icon">￥</view>
                  <view class="price">{{ item.price }}</view>
                </view>
                <view class="price_ext">参考价</view>
              </view>
            </view>
          </view>
        </scroll-view>

        <uni-popup class="app_popup" v-show="showVersion" mode="center" ref="update_app" :mask-click="false">
          <view class="pop_box">
            <image class="pop_bg" mode="widthFix" src="http://www.qixdian.cn/upload/20230830/64eeb4f594a71.png"></image>
            <view class="pop_version">
              <view class="pop_header">发现新版本 {{ versionData.version_no }}</view>
              <text class="pop_content">{{ versionData.content }}</text>
            </view>
            <view class="rate" v-if="downStatus">
              <view class="rate_image">
                <liu-progressbar :bgColor="'#A361F6'" :progress="percentVal" dsColor="#ccc" color="#FFFFFF"
                  :height="'15rpx'" />
              </view>
              <view class="rate_value">{{ percentVal }}%</view>
            </view>
            <view class="down_btn_group" v-else>
              <!-- <view class="down_btn cancel" @click="cancel()">取消</view> -->
              <view class="down_btn down" @click="updateApp()">更新</view>
            </view>
          </view>
        </uni-popup>
      </view>
    </z-paging>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      catData: [
        {
          id: 1,
          text: '商城',
        },
        {
          id: 2,
          text: '进阶'
        }
      ],
      cat_id: 1,
      goodsData: [],
      page: 1,
      last_page: 1,
      refreshStatus: false,
      top: 80,
      height: 0,

      version_no: '',
      showVersion: false,
      percentVal: 0,
      versionData: {},
      mask: true,
      downStatus: false,
    }
  },
  onLoad() {
    // this.getGoodsCates()
    this.getGoods(2)
  },
  onShow() {
    this.percentVal = 0
    this.showVersion = false
    this.mask = true
    this.downStatus = false
    if (uni.getStorageSync('update_app')) {
      this.getVersion()
    }
  },

  methods: {
    checkVersion() {
      let ua = uni.getSystemInfoSync().platform
      if (/ios/i.test(ua)) {
        this.type = 'ios'
      } else if (/android/i.test(ua)) {
        this.type = 'android'
      }
      uni.showLoading({
        title: '检查更新中',
      })
      api.versions
        .check({ refresh: 1, type: this.type, version_no: this.version_no })
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.versionData = res.data
            if (res.data.status == 0) {
              uni.setStorageSync('update_app', 0)
            } else {
              this.showVersion = true
              this.$refs.update_app.open('center')
              uni.setStorageSync('update_app', 1)
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getVersion() {
      plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
        this.version_no = wgtinfo.version
        this.checkVersion()
      })
    },
    updateApp() {
      this.downStatus = true
      this.mask = false
      if (this.type == 'android') {
        this.androidUpdate()
      } else if (this.type == 'ios') {
        this.iosUpdate()
      }
    },
    androidUpdate() {
      let file_size = this.versionData.file_size

      var dtask = plus.downloader.createDownload(this.versionData.url, {}, function (d, status) {
        // 下载完成
        if (status == 200) {
          plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function (error) {
            this.show('安装成功')
          })
        } else {
          this.show('安装失败')
        }
      })
      dtask.start()

      let timer = setInterval(() => {
        let percent = (dtask.downloadedSize / file_size).toFixed(2) // fileSize文件总大小，后端返回的
        this.percentVal = Math.floor(percent * 100) // 转成整数展示
        if (percent >= 1) {
          // 注意百分比，及时清除定时器即可
          clearInterval(timer)
          this.showVersion = false
          this.$refs.pop.close()
        }
      }, 18)
    },
    iosUpdate() {
      plus.runtime.launchApplication(
        {
          action: `${this.versionData.url}`,
        },
        function (e) {
          console.log('Open system default browser failed: ' + e.message)
        },
      )
    },
    splitNum(num) {
      return num.split('.')
    },
    changeCat(cat_id) {
      this.cat_id = cat_id
      this.$refs.paging.reload()

    },
    queryList(pageNo, pageSize) {
      let data = {
        goods_cate_id: this.cat_id,
        page: pageNo,
        limit: pageSize
      }
      if (this.cat_id == 1) {
        this.getGoods(data)
      } else {
        api.goods
          .rh(data)
          .then((res) => {
            if (res.code == 200) {
              this.$refs.paging.complete(res.data.data)
            }
          })
      }

    },
    rhGet() {
      api.goods
        .rh({ page: this.page, goods_cate_id: this.cat_id })
        .then((res) => {
          if (res.code == 200) {
            this.goodsData = res.data.data
          }
        })
    },
    lower() {
      if (this.page > this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getGoods(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getGoods(2)
    },
    getGoods(data) {
      api.goods
        .index(data)
        .then((res) => {
          if (res.code === 200) {
            this.$refs.paging.complete(res.data.data)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getGoodsCates() {
      api.goodsCates
        .index()
        .then((res) => {
          if (res.code === 200) {
            this.catData = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.shop-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: url('https://www.dingxians.cn/upload/user_static/shop/bg.png') no-repeat;

}

.content {
  flex: 1;
  box-sizing: border-box;
  margin-top: 20rpx;
  /* padding-bottom: 50px; */
  overflow: hidden;

  /* padding-bottom: 50px; */
  /* overflow-y: hidden; */
  &::-webkit-scrollbar {
    display: none;
  }

  /* background: linear-gradient(to bottom, #d5c7fa, #e2ecf5); */
}

.header {
  display: flex;
  flex-direction: column;
  /*  position: fixed;
  left: 0; */
  margin: 0 20rpx;
  width: 710rpx;

  /* height: 100rpx; */
  .header_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .header_title {
      color: #ded000;
      font-weight: bold;
      font-size: 36rpx;
      height: 40rpx;
    }

    .header_image {
      width: 400rpx;
      height: 50rpx;
    }

    .header-desc {
      color: #b2ad5d;
      font-size: 22rpx;
    }
  }

  .cat_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 45rpx;
    overflow: scroll;

    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .cat_item {
      flex-shrink: 0;
      display: flex;
      margin-right: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 176rpx;
      height: 60rpx;
      margin-right: 20rpx;
      line-height: 60rpx;
      text-align: center;
      background: url('https://www.dingxians.cn/images/shop/cat-item-bg.png');
      background-size: 176rpx 60rpx;
      background-clip: content-box;

      .cat-item-title {
        font-size: 20rpx;
        color: white;
      }

      .cat_border {
        height: 10rpx;
        margin-top: 5rpx;
        width: 40rpx;
      }

      &.active {
        font-weight: bold;
        color: #a361f6;
        font-size: 34rpx;
        background-image: url('https://www.dingxians.cn/images/shop/cat-item-bg-active.png');

        .cat_border {
          height: 10rpx;
          margin-top: 5rpx;
          width: 40rpx;
          background-color: #6a32ea;
        }
      }
    }
  }
}

.scroll {
  /* position: fixed; */
  /* top: 260rpx; */
  height: 100%;
  margin: 0 auto;
  width: 710rpx;
  /* left: calc(50% - 355rpx); */
  /* height: calc(100vh - 265rpx); */
  overflow-y: hidden;

  &::-webkit-scrollbar {
    display: none;
  }
}

.goods_box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 0 auto;

  &::-webkit-scrollbar {
    display: none;
  }

  flex-wrap: wrap;

  .goods_item {
    background: url('https://www.dingxians.cn/upload/user_static/shop/goods-item-bg.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    width: 345rpx;
    height: 474rpx;
    margin-bottom: 20rpx;

    .goods_image {
      margin: 0 auto;
      height: 292rpx;
      width: 292rpx;
    }

    .price_box {
      display: flex;
      align-items: center;
      width: 300rpx;
      margin: 5rpx auto 10rpx auto;

      .price_box_left {
        display: flex;
        align-items: baseline;
        color: #ded000;

        .price_icon {
          font-weight: bold;
          font-size: 22rpx;
        }

        .price {
          font-weight: bold;
          font-size: 40rpx;
        }
      }

      .price_float,
      .price_dot {
        font-size: 24rpx;
        font-weight: bold;
      }

      .price_ext {
        /* background-color: #e7e7e7; */
        background-color: #292929;
        font-size: 22rpx;
        margin-left: 10rpx;
        padding: 0 10rpx;
        text-align: center;
        color: #b5b5b5;
        border-radius: 5rpx;
      }
    }

    .goods_title {
      width: 300rpx;
      margin: 40rpx auto 0 auto;
      color: white;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 24rpx;
    }

    .goods_exchange_price {
      width: 300rpx;
      margin: 0 auto 10rpx auto;
      font-size: 34rpx;
      color: red;
      display: flex;
      align-items: baseline;

      .exchange_ext {
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }
  }
}

.app_popup {
  .pop_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // background-color: #fff;
    width: 600rpx;
    height: 600rpx;
    border-radius: 10rpx;
    // padding: 20rpx 0;
    position: relative;

    .pop_bg {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }

    .pop_version {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 100rpx;
      margin-left: 60rpx;

      .pop_header {
        color: #fff;
      }

      .pop_content {
        // padding: 0 20rpx;
        margin-top: 120rpx;
      }
    }

    .rate {
      width: 550rpx;
      margin: 0 auto;
      align-items: center;
      display: flex;

      .rate_image {
        width: 500rpx;
        margin-right: 10rpx;
      }
    }

    .down_btn_group {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .down_btn {
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 24rpx;
        border-radius: 10rpx;

        &.cancel {
          background-color: #ccc;
          color: #999;
        }

        &.down {
          background-color: #a361f6;
          color: #fff;
        }
      }
    }
  }
}
</style>
